<script setup>
import { onMounted, ref } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom,
  Notebook,
  PieChart,
  Memo,
  Notification
} from "@element-plus/icons-vue";
import router from "@/router";
import { imageEmits } from "element-plus";
import { useTokenStore } from "@/store/token.js";
import { useUserInfoStore } from "@/store/user.js";
import { userInfoService } from "@/api/user/user";

//获取用户状态
const userInfoStore = useUserInfoStore()
console.log(userInfoStore.userInfo)
const userType = ref()
console.log(userInfoStore.userInfo.userType)
//调用useTokenStore得到状态
const tokenStore = useTokenStore();
const isCollapse = ref(false);


//学校信息数据模型
const schoolInfo = {
  name: "华信智源",
  address: "北京市海淀区",
  tel: "010-12345678",
  email: "post@bjtu.edu.cn",
  logo: "",
};


// 获取用户信息
const getUserInfo = async () => {
  let res = await userInfoService();
  if (res.code == 200) {
    userInfoStore.userInfo = res.data;
  }
}
getUserInfo();
//默认学校logo
const logo = ref(
  "https://s2.cn.bing.net/th?id=OJ.xRVeiBin2a200Q&qlt=80&o=6&dpr=1.3&pid=SANGAM"
);
//默认头像
const image = ref("https://pic.616pic.com/ys_img/00/06/27/5m1AgeRLf3.jpg");

const isVisible = ref(false);
function toggleVisibility() {
  isVisible.value = !isVisible.value;
}
function push1() {
  router.push("/user/UserInfo");
  isVisible.value = false;
}

function push2() {
  router.push("/user/UserSafe");
  isVisible.value = false;
}

function push3() {
  tokenStore.removeToken();
  userInfoStore.removeInfo();
  router.push("/login");
  isVisible.value = false;
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部 -->
      <el-header class="common-layout-header">
        <div class="logo">
          <img src="@/assets/img/logo_min.png" />
        </div>
        <div class="user">
          <span>{{ userInfoStore.userInfo.userType == '1' ? '讲师' : (userInfoStore.userInfo.userType == '2' ? '学生' :
            '管理员') }}:{{
              userInfoStore.userInfo.nickName }}</span>
          <img src="@/assets/img/user.png" @click="toggleVisibility"
            v-if="userInfoStore.userInfo.userAvatar === null || userInfoStore.userInfo.userAvatar === ''" />
          <img :src="userInfoStore.userInfo.userAvatar" @click="toggleVisibility" v-else />
        </div>
      </el-header>
      <el-container>
        <div class="common-layout-aside" @mouseenter="isCollapse = false" @mouseleave="isCollapse = true">
          <el-aside width="200px">
            <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
              @close="handleClose" router>
              <el-sub-menu index="1">
                <template #title>
                  <el-icon class="iconn">内容</el-icon>

                </template>
                <el-menu-item index="/course/CourseList"><el-icon>
                    <Notebook />
                  </el-icon>课程资源</el-menu-item>
                  <el-menu-item index="/exam/index"  v-show="2 == userInfoStore.userInfo.userType"><el-icon>
                    <View />
                    <el-icon>
                      <Memo />
                    </el-icon>
                  </el-icon>考试系统</el-menu-item>
                  <el-menu-item index="/exam/index2"><el-icon>
                    <View />
                    <el-icon>
                      <Memo />
                    </el-icon>
                  </el-icon>模拟考记录</el-menu-item>
                <el-menu-item index="/course/CourseMangement" v-show="1 == userInfoStore.userInfo.userType"><el-icon>
                    <el-icon>
                      <Notification />
                    </el-icon>
                  </el-icon>课程管理</el-menu-item>
                <el-menu-item index="/exam/Kaoguanli" v-show="1 == userInfoStore.userInfo.userType"><el-icon>
                    <el-icon>
                      <Notification />
                    </el-icon>
                  </el-icon>考试系统</el-menu-item>
              </el-sub-menu>
         
             
              <!-- <el-sub-menu index="2" v-show="1 == userInfoStore.userInfo.userType">
                <template #title>
                  <el-icon class="iconn">教学</el-icon>

                </template>
                <el-menu-item index="/work/SelectWorkList"><el-icon>
                    <Timer />
                    <el-icon>
                      <EditPen />
                    </el-icon>
                  </el-icon>作业管理</el-menu-item>
              </el-sub-menu> -->
              <el-sub-menu index="3">
                <template #title>
                  <el-icon class="iconn">用户</el-icon>

                </template>
                <el-menu-item index="/user/UserInfo"><el-icon>
                    <el-icon>
                      <User />
                    </el-icon>
                  </el-icon>个人资料</el-menu-item>
                <!-- <el-menu-item index="/user/UserSafe"><el-icon>
                    <View />
                  </el-icon>安全管理</el-menu-item> -->
              </el-sub-menu>
              <el-sub-menu index="4" v-show="1 == userInfoStore.userInfo.userType">
                <template #title>
                  <el-icon class="iconn">教师</el-icon>
                  <span></span>
                </template>
                <el-menu-item index="/class/AddClass"><el-icon>
                    <View />
                    <el-icon>
                      <Memo />
                    </el-icon>
                  </el-icon>班级列表</el-menu-item>

              </el-sub-menu>
              <!-- <el-sub-menu index="5">
                <template #title>
                  <el-icon class="iconn">管理</el-icon>

                </template>
                <el-menu-item index="/school/AddSchool"><el-icon>
                    <View />
                  </el-icon>创建学校</el-menu-item>
                <el-menu-item index="/system/AddSystem"><el-icon>
                    <View />
                  </el-icon>添加管理员</el-menu-item>
              </el-sub-menu> -->
            </el-menu>
          </el-aside>
        </div>
        <div class="main">
          <router-view></router-view>
        </div>
        <el-container> </el-container>
      </el-container>
    </el-container>
  </div>

  <div class="common-layout-header-right" v-if="isVisible">
    <div class="common-layout-header-right-01" @click="push1">
      <span>个人资料</span>
    </div>
    <!-- <div class="common-layout-header-right-02">
      <span>安全设置</span>
    </div> -->
    <div class="common-layout-header-right-03">
      <span @click="push3">退出登录</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.iconn {
  font-size: 14px;
  font-style: normal;
}

.iconnn {
  margin-left: -3px;
}

.common-layout {
  .el-header {
    color: rgb(255, 255, 255);
    line-height: 60px;
  }
}

/* 舞台样式 */
.main {
  margin-left: 60px;
  margin-top: 60px;
  width: 100%;
}

/* 左侧导航栏样式 */
.common-layout-aside {
  border-right: 1px solid #e8e8e8;
  overflow: auto;
  position: fixed;
  top: 60px;
  box-shadow: 0 6px 16px 0 rgba(189, 195, 214, .5);
  width: 64px;
  height: 100%;
  transition: width 0.3s;
  z-index: 998;
  background-color: rgb(255, 255, 255);
}

.common-layout-aside::-webkit-scrollbar {
  display: none;
}

.common-layout-aside:hover {
  width: 200px;
  transition: width 0.3s;
}

/* 头部最外层盒子样式 */
.common-layout-header {
  width: 100%;
  height: 60px;
  background-color: rgb(255, 255, 255);
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .logo img {
    width: 200px;
    height: 27px;
  }

  .user img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }

  div {
    span {
      color: rgb(138, 138, 138);
      vertical-align: middle;
      margin-right: 10px;
    }

    img {
      vertical-align: middle;
    }
  }
}

.el-menu-vertical-demo {
  border: 0;
}

/* 头部布局框架样式 */
.el-row {
  color: black;
  font-size: 24px;
}

.el-col {
  border-radius: 4px;
  /* border: 1px solid #d2e7f7; */
  height: 60px;
  overflow: hidden;
}

.el-col:nth-of-type(1) {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 32px;
    height: 32px;
  }
}

.el-col:nth-of-type(3) {
  display: flex;
  justify-content: flex-end;
}

.el-col:nth-of-type(4) {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    border-radius: 10px;
    width: 32px;
    height: 32px;
    cursor: pointer;
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.common-layout-header-right {
  z-index: 999;
  position: fixed;
  right: 10px;
  top: 70px;
  width: 200px;
  height: 100px;
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1);
}

.common-layout-header-right-01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}

.common-layout-header-right-02 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
  border-bottom: 1px solid #ccc;
}

.common-layout-header-right-03 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: rgb(255, 255, 255);
  cursor: pointer;
}
</style>